<template>
  <view class="permission-page">
    <!-- 激活码列表 -->
    <view class="code-list">
      <view v-for="(code, index) in codeList" 
            :key="index"
            class="code-item"
            @tap="handleCopy(code.code)"
      >
        <view class="code-info">
          <text class="code">{{ code.code }}</text>
          <text class="status" :class="code.isUsed ? 'used' : ''">
            {{ code.isUsed ? '已使用' : '未使用' }}
          </text>
        </view>
        <view class="code-detail" v-if="code.isUsed">
          <text class="used-by">使用者：{{ code.usedBy }}</text>
          <text class="used-time">{{ formatDate(code.updatedAt) }}</text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="codeList.length === 0" class="empty-state">
      <uni-icons type="info" size="64" color="#999"/>
      <text class="empty-text">暂无激活码</text>
    </view>

    <!-- 生成按钮 -->
    <button class="generate-btn" @click="handleGenerate">
      生成激活码
    </button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userApi } from '@/api/user'

const codeList = ref([])

// 获取激活码列表
const getCodeList = async () => {
  try {
    const res = await userApi.getActivationCodes()
    codeList.value = res.list || []
  } catch (error) {
    console.error('获取激活码列表失败:', error)
  }
}

// 生成激活码
const handleGenerate = async () => {
  try {
    const res = await userApi.generateActivationCode()
    if (res.code) {
      uni.setClipboardData({
        data: res.code,
        success: () => {
          uni.showToast({
            title: '激活码已复制',
            icon: 'success'
          })
        }
      })
      getCodeList()
    }
  } catch (error) {
    uni.showToast({
      title: '生成失败',
      icon: 'error'
    })
  }
}

// 复制激活码
const handleCopy = (code) => {
  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  getCodeList()
})
</script>

<style>
.permission-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
  padding-bottom: 80px;
}

.code-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.code-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
}

.code-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code {
  font-size: 18px;
  font-weight: 500;
  font-family: monospace;
  letter-spacing: 1px;
}

.status {
  font-size: 12px;
  color: #52c41a;
}

.status.used {
  color: #999;
}

.code-detail {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: space-between;
}

.empty-state {
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

.generate-btn {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1890ff;
  color: white;
  font-size: 16px;
  padding: 0 32px;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  border: none;
}
</style> 
